<template>
	<view class="uni-popup-dialog">
		<view class="uni-dialog-title">
			<image src="../../static/icon/close.png" class="close" @click="close"></image>
			<text class="uni-dialog-title-text" :class="['uni-popup__' + dialogType]">{{ title }}</text>
		</view>
		<view class="uni-dialog-content">
			<view class="flex-row flex-between paylist">
				<view class="paystyle flex-row flex-between">
					<!-- <image src='../../static/icon/wx@2x.png'></image> -->
					<view class="labelLeft">
						<text class="imp">*</text>
						<text>成交价格</text>
					</view>
					<view class="labelRight flex-row flex-between">
						<input type="number" v-model="price" />
						<text>元</text>
					</view>
				</view>
			</view>
			<view class="flex-row flex-between paylist">
				<view class="paystyle flex-row flex-between">
					<view class="labelLeft">
						<text class="imp">*</text>
						<text>合作方式</text>
					</view>
					<view class="labelRight "><view class="buyStyle">买断(专利权全部转让)</view></view>
				</view>
			</view>
			<view class="paylist" style="padding: 35upx 0 ;height: 700upx;overflow-y: scroll;">
				<view class="paystyle" style="padding:0 0 30upx">
					<text class="imp">*</text>
					<text class="other">交易类型(单选)</text>
				</view>
				<view class="changeType">
					<view class="typeBox" :class="active == 1?'selected':''">
						<view class="typeList flex-row  ">
							<image :src="active==1?'../../static/icon/checked.png':'../../static/icon/unchecked.png'" @click="checkItem(1)"></image>
							<view class="infoBox">
								<view class="titles">委托平台一站式服务(默认）</view>
								<view class="desc">
									(1) 平台交易服务费¥￥
									<text>{{getFree}}</text>
									
								</view>
								<view class="desc">
									(2) 专利转让手续代办费￥
									<text>{{list.transferFee}}</text>
									
								</view>
								<view class="desc">
									(3) 专利转让官费￥
									<text>{{list.fixedFee}}</text>
									/件（国知局收{{list.fixedFee}}取元/件)
								</view>
								<view class="desc">
									(4) 专利登记簿副本官费30.00元
									国知局收取30元/件；注：专利登记簿副本通过邮政EMS邮寄，邮费收件人到付）
								</view>
							</view>
						</view>
					</view>
					<view class="typeBox" :class="active == 2?'selected':''">
						<view class="typeList flex-row ">
							<image :src="active==2?'../../static/icon/checked.png':'../../static/icon/unchecked.png'" @click="checkItem(2)"></image>
							<view class="infoBox">
								<view class="titles flex-row flex-between">
									<view>指定机构办理专利转让手续</view>
									<view class="btn" @click="checkAppio">指定机构</view>
								</view>
								<view class="desc">
									(1) 平台交易服务费￥
									<text>{{getFree}}</text>
									
								</view>
								<view class="desc">
									(2) 指定机构办理专利转让手续，手续费￥
									<text>{{list.transferFee}}</text>
									
								</view>
								<view class="desc">
									(3) 专利转让官费￥
									<text>{{list.fixedFee}}</text>
									/件（国知局收{{list.fixedFee}}取元/件)
								</view>
							</view>
						</view>
						<view class="flex-row jigouS">
							<image src="../../static/icon/dengpao.png"></image>
							<view>{{isSelected?name:'你还未指定专利转让代办机构哦, 点击右上角立即指定吧！'}}</view>
						</view>
					</view>
					<view class="typeBox " :class="active == 3?'selected':''">
						<view class="typeList flex-row ">
							<image :src="active==3?'../../static/icon/checked.png':'../../static/icon/unchecked.png'" @click="checkItem(3)"></image>
							<view class="infoBox">
								<view class="titles">自助办理专利转让手续</view>
								<view class="desc">
									(1) 平台交易手续费￥
									<text>{{getFree}}</text>
									
								</view>
								<view class="desc">
									(2) 自己办理专利转让手续，手续费￥
									<text>0</text>
									
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="confirmBtn flex-row flex-between">
			<view>
				合计:
				<text class="dw">￥</text>
				<text>{{total}}</text>
			</view>
			<view class="btns" @click="onOk">立即签约</view>
		</view>
		
	</view>
</template>

<script>
/**
 * PopUp 弹出层-对话框样式
 * @description 弹出层-对话框样式
 * @tutorial https://ext.dcloud.net.cn/plugin?id=329
 * @property {String} value input 模式下的默认值
 * @property {String} placeholder input 模式下输入提示
 * @property {String} type = [success|warning|info|error] 主题样式
 *  @value success 成功
 * 	@value warning 提示
 * 	@value info 消息
 * 	@value error 错误
 * @property {String} mode = [base|input] 模式、
 * 	@value base 基础对话框
 * 	@value input 可输入对话框
 * @property {String} content 对话框内容
 * @property {Boolean} beforeClose 是否拦截取消事件
 * @event {Function} confirm 点击确认按钮触发
 * @event {Function} close 点击取消按钮触发
 */

export default {
	name: 'uniPopupDialog',
	props: {
		value: {
			type: [String, Number],
			default: ''
		},
		patentId: {
			type: [String, Number],
			default: ''
		},
		userId: {
			type: [String, Number],
			default: ''
		},
		placeholder: {
			type: [String, Number],
			default: '请输入内容'
		},
		/**
		 * 对话框主题 success/warning/info/error	  默认 success
		 */
		type: {
			type: String,
			default: 'error'
		},
		/**
		 * 对话框模式 base/input
		 */
		mode: {
			type: String,
			default: 'base'
		},
		/**
		 * 对话框标题
		 */
		title: {
			type: String,
			default: '提示'
		},
		/**
		 * 对话框内容
		 */
		content: {
			type: String,
			default: ''
		},
		/**
		 * 拦截取消事件 ，如果拦截取消事件，必须监听close事件，执行 done()
		 */
		beforeClose: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			dialogType: 'error',
			focus: false,
			val: '',
			active:1,
			list:{
				serviceFee:{a: 1, b: 1, c: 1, d: 1, e: 1, f: 1}
			},
			price:0,
			total:0,
			isSelected:false,
			name:'',
			agentId:''
		};
	},
	inject: ['popup'],
	watch: {
		type(val) {
			this.dialogType = val;
		},
		mode(val) {
			if (val === 'input') {
				this.dialogType = 'info';
			}
		},
		value(val) {
			this.val = val;
		},
		price(){
			if(this.active!=3){
				this.total =parseFloat(this.getFree ) + parseFloat(this.list.fixedFee) + parseFloat(this.list.transferFee) + parseFloat(this.price)
				
			}else{
				this.total = this.getFree
			}
		}
	},
	created() {
		// 对话框遮罩不可点击
		this.popup.mkclick = false;
		if (this.mode === 'input') {
			this.dialogType = 'info';
			this.val = this.value;
		} else {
			this.dialogType = this.type;
		}
	},
	mounted() {
		this.focus = true;
		this.getData()
	},
	computed:{
		getFree(){
			let price = this.price||0
			let arr = this.list.serviceFee
			let result = ''
			if(this.price<=2000){
				result = arr.a*price
			}else if(this.price>2000&&this.price<=4000){
				result = arr.b*price
			}else if(this.price>4000&&this.price<=6000){
				result = arr.c*price
			}else if(this.price>6000&&this.price<=10000){
				result = arr.d*price
			}else if(this.price>10000&&this.price<=25000){
				result = arr.e*price
			}else if(this.price>25000){
				result = arr.f*price
			}
			return result/100
		}
	},
	methods: {
		
		//交易类型
		getData(){
			this.$http.get('/patent/getTradeTypeList').then(res => {
				
				if (res.code == 0) {
					this.list = res.data
					this.list.free = 0
					this.total = parseFloat(this.list.fixedFee) + parseFloat(this.list.transferFee)
				}
			})
		},
			
		
		/**
		 * 点击确认按钮
		 */
		onOk() {
			
			
			let patentReq = {
				  "agentId": this.agentId,
				  "money": this.total,
				  "orderId": '',
				  "orderType": this.active,
				  "patentId": this.patentId,
				  "serviceFee": this.getFree
				
			}
		
			this.$http.post('/orderPatent/createOrder',patentReq).then(res => {
				
				if (res.code == 0) {
					this.$emit('confirm',res.data,this.total);
					uni.navigateTo({
						// url:`/pages/home/sign?id=${res.data.orderId}`
						url:'../../pages/detail/text'
					})
					
				}else{
					this.popup.close();
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
				}
			})
			
		},
		/**
		 * 点击取消按钮
		 */
		close() {
			if (this.beforeClose) {
				this.$emit('close', () => {
					this.popup.close();
				});
				return;
			}
			this.popup.close();
		},
		checkItem(str){
			this.active = str
			if(this.active!=3){
				this.total = parseFloat(this.getFree )+ parseFloat(this.list.fixedFee) + parseFloat(this.list.transferFee)+parseFloat(this.price)
				
			}else{
				this.total = parseFloat(this.getFree) + parseFloat(this.price)
			}
		},
		checkAppio() {
			if(this.active == 2){
				uni.navigateTo({
					url: '/pages/home/organ'
				});
			}
			
		},
		getItem(item){
			this.isSelected = true
			this.name = item.firmName
			this.agentId = item.id
		}
	}
};
</script>

<style lang="scss" scoped>
.uni-popup-dialog {
	width: 100%;
	border-radius: 15px 15px 0 0;
	background-color: #fff;
	// padding: 0 0 40upx 0;
	padding-bottom: 140upx;
}

.uni-dialog-title {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	justify-content: center;
	padding-top: 15px;
	padding-bottom: 5px;
	text-align: center;
	position: relative;
	image.close {
		position: absolute;
		width: 40upx;
		right: 20upx;
		top: 20upx;
		height: 40upx;
	}
}
.confirmBtn {
	position: fixed;
	left: 0;
	bottom: 0;
	background: #fff;
	width: 690upx;
	padding: 30upx;
	font-size: 30upx;
	color: #22222a;
	text {
		color: #fd580a;
		font-size: 48upx;
		font-weight: bold;
		&.dw {
			font-size: 28upx;
			padding-left: 16upx;
		}
	}
	.btns {
		width: 234upx;
		height: 80upx;
		line-height: 80upx;
		background: rgba(253, 88, 10, 1);
		border-radius: 8upx;
		color: #fff;
		font-size: 34upx;
		text-align: center;
	}
}
.uni-dialog-title-text {
	font-size: 32upx;
	font-weight: bold;
}

.uni-dialog-content {
	padding: 26upx 0upx 0;
	.paylist {
		border-bottom: 1upx solid rgba(238, 238, 238, 1);
		padding: 35upx 0;
		margin:0 35upx;
		// &:last-child{
		// 	border-bottom: none;
		// }
		.paystyle {
			width: 100%;
			.labelLeft {
				width: 160upx;
				text-align: left;
			}
			.labelRight {
				width: 460upx;
				input {
					width: 430upx;
					font-size: 30upx;
					color: #22222a;
					font-weight: bold;
				}
				.buyStyle {
					color: #9a9a9a;
					font-size: 30upx;
				}
			}
			display: flex;
			align-items: center;
			font-size: 30upx;
			color: #22222a;
			.imp {
				color: #fd0b0b;
			}
		}
		.changeType {
			.typeBox {
				padding: 30upx;
				background: #fff;
				opacity: 0.5;
				&.selected {
					background: rgba(255, 248, 244, 1);
					opacity: 1;
				}
				.jigouS {
					padding-top: 40upx;
					font-size: 24upx;
					color: #fd580a;
					align-items: center;
					image {
						width: 24upx;
						margin-right: 28upx;
						height: 24upx;
					}
				}
				.typeList {
					justify-content: flex-start;
					align-items: flex-start;

					> image {
						width: 32upx;
						height: 32upx;
						margin-right: 20upx;
						margin-top: 6upx;
					}
					.infoBox {
						width: 630upx;
						.titles {
							font-size: 30upx;
							color: #22222a;
							.btn {
								width: 148upx;
								height: 50upx;
								border: 1upx solid rgba(253, 88, 10, 1);
								border-radius: 8upx;
								text-align: center;
								line-height: 50upx;
								font-size: 28upx;
								color: rgba(253, 88, 10, 1);
								&.gary{
									opacity: 0.5;
								}
							}
						}
						.desc {
							font-size: 26upx;
							color: #666666;
							padding-top: 24upx;
							> text {
								color: #fd580a;
							}
						}
					}
				}
			}
		}
	}
}

.uni-dialog-content-text {
	font-size: 29upx;
	color: #22222a;
}

.uni-dialog-button-group {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	border-top-color: #f5f5f5;
	border-top-style: solid;
	border-top-width: 1px;
}

.uni-dialog-button {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */

	flex: 1;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	height: 45px;
}

.uni-border-left {
	border-left-color: #f0f0f0;
	border-left-style: solid;
	border-left-width: 1px;
}

.uni-dialog-button-text {
	font-size: 32upx;
}

.uni-button-color {
	color: #fe590b;
}

.uni-button-cancel {
	color: #9a9a9a;
}

.uni-dialog-input {
	flex: 1;
	font-size: 14px;
}

.uni-popup__success {
	color: $uni-color-success;
}

.uni-popup__warn {
	color: $uni-color-warning;
}

.uni-popup__error {
	color: $uni-color-error;
}

.uni-popup__info {
	color: #22222a;
}
</style>
